<template>
    <div class="account-list-container">
        <!-- 面包屑组件 -->
        <Crumbs :img="portrait" text1="账号管理" text2="添加账号" :text3="username"/>
        <div class="list-content">
          <h4>账号列表</h4>
          <el-table
            :data="list"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            ref="multipleTable">
            <el-table-column type="selection"></el-table-column>
            <el-table-column
              prop="account"
              label="账号"
              width="100px">                  
            </el-table-column>
 <!-- {
              account: "dddd"
              ctime: "2021-05-18T04:59:34.000Z"
              id: 78
              imgUrl: "default.jpg"
              userGroup: "选项1"
            } -->

            
            <el-table-column
              prop="userGroup"
              label="用户组"
              width="180">
            </el-table-column>

            <el-table-column
              prop="ctime"
              label="创建时间"
              width="200">
            </el-table-column>
            <el-table-column label="操作" width="200px">
              <template slot-scope="scope">
                <el-button type="primary" @click="clickedit(scope.$index)">编辑</el-button>
                <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
            :current-page="curPage"
            :page-sizes="[5, 8, 10, 15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
            <div class="batch-del">
              <el-button type="info" @click="clickdel">批量删除</el-button>
              <el-button type="primary" @click="toggleSelection()">取消选择</el-button>
            </div>
        </div>

        <el-dialog title="修改账号" :visible.sync="dialogFormVisible" v-show="true">
          <el-form :model="form">
            <el-form-item label="输入账号" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户组" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="请选择用户组">
                <el-option label="超级管理员" value="超级管理员"></el-option>
                <el-option label="普通管理员" value="普通管理员"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="determine">确 定</el-button>
          </div>
        </el-dialog>
    </div>

    
</template>

<script>

    import Crumbs from "../../components/Crumbs"
    import {accountList,delAccoun,batchDelAccoun,editAccoun} from "@/apis/api"
    import {conversionTime} from "@/utlis/utlis.js"
    let imgUrl=window.localStorage.getItem("imgUrl")
    let account=window.localStorage.getItem("account")
export default {
    data(){
      return{
        portrait:"",
        username:"",
        list:[],
        curPage:1,
        pageSize:5,
        total:0,
        ids:[],
        isshow:false,
        editIndex:0,

        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px'
          
      }
    },

    components:{
      Crumbs
    },

    created(){
      this.pageDown()
      this.portrait=imgUrl
      this.username=account
    },

    methods:{

      //翻页功能
       pageDown(){
          accountList({
            currentPage:this.curPage,
            pageSize:this.pageSize
          })
          .then(res=>{
            for(let i=0; i<res.data.data.length; i++){
              res.data.data[i].ctime=conversionTime(res.data.data[i].ctime)
            }
            this.list=res.data.data
            this.total=res.data.total
          })
        },

        //点击页码翻页
        handleSizeChange(val1){
          this.pageSize=val1
          this.pageDown()
        },
        //设置每页的条数
        handleCurrentChange(val2){   
          this.curPage=val2
          this.pageDown()
        },
        //删除功能
        handleDelete(row){
          this.$confirm('此操作将永久删除该数据, 是否继续?', '小猪猪烤肉提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            delAccoun({
              id:row.id
            })
            .then(res=>{
              console.log(res)
              this.pageDown()
            })
            this.$message({
              type: 'success',
              message: '删除成功!',

            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
        },
         //批量删除
        handleSelectionChange(rows){
          //  console.log(rows)
           rows.forEach(v=>{
             this.ids.push(v.id)
           })
          //  console.log(this.ids)
        },
        clickdel(){
           this.$confirm('此操作将永久删除该数据, 是否继续?', '小猪猪烤肉提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                let IDS=JSON.stringify(this.ids)
                    batchDelAccoun({
                    ids:IDS
                  })
                  .then(res=>{
                    console.log(res)
                    this.pageDown()
                  })
                  this.$message({
                  type: 'success',
                  message: '批量删除成功!',

                });
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });          
              });
        },
        //取消选择
          toggleSelection(rows) {
            if (rows) {
              rows.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row);
              });
            } else {
              this.$refs.multipleTable.clearSelection();
            }
          },
        //编辑账号
        clickedit(index){
          this.dialogFormVisible = true;
          // console.log(index)
          this.editIndex=index
        },
        //确定编辑
        determine(){
          this.dialogFormVisible = false;
          // this.list[this.editIndex].userGroup=this.form.region;
          // this.list[this.editIndex].account=this.form.name;
          editAccoun({
            id:this.list[this.editIndex].id,
            account:this.form.name,
            userGroup:this.form.region,
          })
          .then(res=>{
            console.log(res.data)
            this.pageDown()
          })
        }
      },
}
</script>

<style lang=less scoped>
    .account-list-container{
        width:100%;
        height:100%;
        display:flex;
        flex-direction: column;
    }
    .list-content{
      flex:1;
      overflow: scroll;
      margin:20px;
      padding:20px;
      background-color:#fff;
      h4{
        padding-bottom:10px;
        border-bottom:1px solid #eee;
      }
  }
  .el-button{
    width:70px;
  }
  .el-pagination{
    margin-top:15px;
    margin-bottom:10px;
  }
   .batch-del{
     .el-button{
       width:100px;
     }
   }
</style>